<template>
    <el-menu
    active-text-color="#e6e6e6"
    background-color="#4F94CD"
    :default-active="route.path"
    class="el-menu-vertical-demo"
    :router="true"
    >
    <div class="logo">公司后台管理</div>
    <el-menu-item index="/client">
        <el-icon><User /></el-icon>
        <span>客户管理</span>
    </el-menu-item>
    <el-menu-item index="/WorkerView">
        <el-icon><UserFilled /></el-icon>
        <span>送水工管理</span>
    </el-menu-item>
    <el-menu-item index="/WhdManage">
        <el-icon><Histogram /></el-icon>
        <span>送水历史管理</span>
    </el-menu-item>
    <el-menu-item index="/Salary">
        <el-icon><Money /></el-icon>
        <span>工资计算</span>
    </el-menu-item>
    <el-sub-menu index="5">
        <template #title>
        <el-icon><Key /></el-icon>
        <span>管理员管理</span>
        </template>
        <el-menu-item index="/modifypassword">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
        </el-menu-item>
        <el-menu-item index="/administratorsinfo">
            <el-icon><Document /></el-icon>
            <span>管理员信息</span>
        </el-menu-item>
    </el-sub-menu>
    </el-menu>
</template>


<script setup>
import { Document, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
 
const route = useRoute();

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100vh;
}
.logo{
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    height: 40px;
    line-height:40px;
    background-color: #376d99;
}
span{
    font-size: 16px;
}
</style>

